<template>
  <div id="view-article-pane">
    <el-container>
      <el-header class="title-pane" height="50px">
        <span class="go-back" @click="goBack">
          <ri i="back"></ri>返回
        </span>
        <span class="title">{{title}}</span>
        <span class="right">
          <ri i="edit" title="编辑" @click="goWrite"></ri>
          <ri i="eye" title="研读" @click="goDetailView"></ri>
          <ri i="translate" title="翻译" @click="goTranslator"></ri>
        </span>
      </el-header>
      <el-main class="content-pane">
        <md-content v-if="kind != 1" :content="content" :title="title" @select="contentSelected"></md-content>
        <mat-content v-if="kind == 1" :content="content" :title="title" @select="contentSelected"></mat-content>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import MdContent from "../../content/MarkdownContent.vue";
import MatContent from "../../content/MatContent.vue";
export default {
  components: {
    MdContent,
    MatContent,
  },
  data() {
    return {
      artid: this.$route.params.artid,
      kind: 0,
      title: "",
      content: "",
      paras: [],
      highlight: ""
    };
  },
  created() {
    // fetch article content
    this.fetchArticle();
  },
  methods: {
    fetchArticle() {
      let artid = this.artid;
      console.log(`fetching content for article ${artid}`);
      let articleUrl = `/api/v1/mats/get/${artid}`;
      return this.authGet(articleUrl).then(res => {
        let data = res.data;
        this.kind = data.kind;
        this.title = data.title;
        this.content = data.content;
      });
    },
    goWrite() {
      this.$router.push(`/works/write/${this.artid}`)
    },
    goDetailView() {},
    goTranslator() {},
    goBack() {
      this.$router.go(-1);
    },
    contentSelected(data) {
      console.log("selected:", data);
    }
  }
};
</script>

<style lang="stylus" scoped>
#view-article-pane
  text-align left
  max-height 800px
  padding 0

  .title-pane
    border-bottom 1px solid #eee
    height 50px
    line-height 50px
    text-align center

    span.go-back
      float left
      cursor pointer

      svg
        margin-right 5px

    span.title
      font-weight bold
      font-size 1.2em

    span.right
      float right
      .neo-icon-wrap
        color #409EFF
        font-size 1.2em
        margin-left 5px

  </style>